<template>
  <!-- 绩效框 -->
  <div class="border" style="padding: 15px 0 10px 0">
    <div style="margin-left: 30px;">
      <el-avatar class="border" shape="circle" style="height:50px;width:50px;" :src="task.publisher.avatar"></el-avatar>
      <p
        style="
        display: inline-block;
        line-height: 50px;
        margin:0 0 0 30px;
        vertical-align: top;
        font-size: 18px;
        color:#534c4c;">
        {{task.publisher.name}}
        <el-tag :disable-transitions="true">{{task.publisher.position}}</el-tag>
        <span style="margin-left:10px">给TA安排了如下任务</span>
      </p>
      <div class="border2" style="width: 95%;padding:5px 0 8px 0;margin-top:10px">
        <p style="line-height: 25px;margin:10px 0 10px 10px">{{task.describe}}</p>
        <p class="date">任务发布日期: {{task.publishDate}}</p>
        <p class="date">任务截止日期: {{task.endDate}}</p>
      </div>
      <p>任务完成情况</p>
      <div class="border3" style="width: 95%;padding:10px 0 10px 0">
        <div class="border4" style="width:95%;margin:10px auto 10px auto;" v-for="progress in task.progresses">
          <p style="margin-left:20px;">{{progress.date}} <span style="margin-left:20px;">任务完成度: {{progress.percentage}}</span></p>
          <p style="margin-left:20px;">{{progress.describe}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Performance",
    props:{
      task: {
        type: Object,
        required: true
      }
    }
  }
</script>

<style scoped>
  .container {
    width: 650px;
    margin: 30px 0 0 200px;
  }

  .border {
    box-shadow: 0 2px 8px rgba(81, 66, 66, 0.52), 0 0 6px rgba(0, 0, 0, .04);
  }

  .border2 {
    box-shadow: 1px 2px 6px rgba(43, 180, 137, 0.52), 0 0 6px rgba(95, 95, 95, 0.04)
  }

  .border3 {
    box-shadow: 1px 2px 6px rgba(93, 180, 56, 0.52), 0 0 6px rgba(95, 95, 95, 0.04)
  }
  .border4 {
    box-shadow: 1px 2px 6px rgba(180, 69, 80, 0.52), 0 0 6px rgba(95, 95, 95, 0.04)
  }


  .date {
    text-align: right;
    font-size: 12px;
    margin: 10px 20px 5px 0;
  }
</style>
